<template>
  <div id="left-container">
    <div class="leftContainer">
      <div class="leftContainer-title">
        项目状态统计
      </div>
      <div id="cards">
        <div
          v-for="(card) in cards"
          :key="card.title"
          class="card-item"
        >
          <dv-charts class="ring-charts" :option="card.ring" />
          <div style="text-align:center;margin-top:10px">
            {{ card.name.name }}
          </div>
        </div>
      </div>
      <VEcharts
        autoresize
        :options="optsLeft"
        style="width: 100%; height: 180px"
      />
      <div class="leftContainer-title">
        项目评估结果
      </div>
      <div>
        <roseChart />
      </div>

    </div>
  </div></template>

<script>
import VEcharts from '@/components/vecharts';
import { commonMethod } from '@/api/mapper/index.js';
import roseChart from './roseChart';
export default {
  components: {
    VEcharts,
    roseChart
  },
  data() {
    return {
      cards: [],
      listStyle: [],
      optsLeft: ''
    };
  },
  computed: {
    // optsLeft() {
    //   const newArr = {
    //     xAxis: {
    //       type: 'category',
    //       data: ['入库', '试点', '揭榜'],
    //       axisLine: {// 坐标线
    //         lineStyle: {
    //           type: 'solid',
    //           color: '#fff', // 轴线的颜色
    //           width: '1'// 坐标线的宽度
    //         }
    //       }

    //     },
    //     yAxis: {
    //       type: 'value',
    //       axisLabel: {
    //         textStyle: {
    //           color: '#878787' // 坐标值得具体的颜色
    //         }
    //       }

    //     },
    //     grid: {
    //       top: '10%',
    //       left: '10%',
    //       bottom: '15%'

    //     },
    //     series: [{
    //       data: [120, 200, 150],
    //       type: 'bar',
    //       itemStyle: {
    //         normal: {
    //           color: '#028dd0', // 设置柱子颜色
    //           label: {
    //             show: true, // 柱子上显示值
    //             position: 'top', // 值在柱子上方显示
    //             textStyle: {
    //               color: '#fff'// 值得颜色
    //             }
    //           }
    //         }
    //       },
    //       barWidth: 25// 设置柱子宽度，单位为px

    //     }]
    //   };
    //   return newArr;
    // }
  },
  mounted() {
    const { createData } = this;
    createData();
    // setInterval(createData, 30000);
    setTimeout(async() => {
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 482
      }).then(res => {
        const list = [];
        const date = [];
        res.data.map(o => {
          list.push(o.JBYS_CJDWT);
          date.push(o.NUM);
        });
        this.optsLeft = {
          xAxis: {
            type: 'category',
            data: list,
            axisLine: {// 坐标线
              lineStyle: {
                type: 'solid',
                color: '#fff', // 轴线的颜色
                width: '1'// 坐标线的宽度
              }
            }

          },
          yAxis: {
            type: 'value',
            axisLabel: {
              textStyle: {
                color: '#878787' // 坐标值得具体的颜色
              }
            }

          },
          grid: {
            top: '10%',
            left: '10%',
            bottom: '15%'

          },
          series: [{
            data: date,
            type: 'bar',
            itemStyle: {
              normal: {
                color: '#028dd0', // 设置柱子颜色
                label: {
                  show: true, // 柱子上显示值
                  position: 'top', // 值在柱子上方显示
                  textStyle: {
                    color: '#fff'// 值得颜色
                  }
                }
              }
            },
            barWidth: 25// 设置柱子宽度，单位为px

          }]
        };
      });
    }, 500);
  },
  methods: {
    async createData() {
      let total = 0;
      await commonMethod({
        filterList: [],
        pageIndex: 0,
        pageSize: 100,
        pageType: 1,
        tableId: 481
      }).then(res => {
        res.data.map((item, index) => {
          if (index < 3) {
            this.listStyle.push({
              color: '#016fd6',
              stroke: '#ffff1f',
              value: item.NUM,
              name: item.JBYS_XMZT
            });
          } else {
            total = item.NUM;
          }
        });
      });
      this.cards = this.listStyle.map((foo, i) => ({
        name: {
          name: foo.name
        },
        total: {
          number: [total],
          content: '{nt}',
          textAlign: 'right',
          style: {
            fill: '#ea6027',
            fontWeight: 'bold'
          }
        },

        ring: {
          series: [
            {
              type: 'gauge',
              startAngle: -Math.PI / 2,
              endAngle: Math.PI * 1.5,
              arcLineWidth: 10,
              radius: '80%',
              data: [
                { name: '', value: foo.value }
              ],
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              },
              pointer: {
                show: false
              },
              // 占比
              backgroundArc: {
                style: {
                  stroke: foo.stroke
                }
              },
              details: {
                show: true,
                formatter: '{value}个',
                style: {
                  // 字体颜色
                  fill: '#fff',
                  fontSize: 14
                }
              }
            }
          ],
          color: [foo.color]
        }
      }));
    },
    randomExtend(minNum, maxNum) {
      if (arguments.length === 1) {
        return parseInt(Math.random() * minNum + 1, 10);
      } else {
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      }
    }
  }
};
</script>

<style lang='scss' scoped>
   .leftContainer{
    border: 1px solid #848383;
    height: calc(65vh);
    border-radius: 10px;
   }
   .leftContainer-title{
     margin-top: 10px;
     font-size: 18px;
     font-weight: bolder;
     color: #fff;
     text-align: center;
     margin-bottom: 10px
   }
   #cards {
  display: flex;
  justify-content: space-between;
  height: 30%;
  .card-item {
    width: 30%;
    display: flex;
    flex-direction: column;
  }

  .card-header {
    display: flex;
    height: 20%;
    align-items: center;
    justify-content: space-between;

    .card-header-left {
      font-size: 18px;
      font-weight: bold;
      padding-left: 20px;
    }

    .card-header-right {
      padding-right: 20px;
      font-size: 40px;
      color: #03d3ec;
    }
  }

  .ring-charts {
    height: 55%;
  }

  .card-footer {
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .card-footer-item {
    padding: 5px 10px 0px 10px;
    box-sizing: border-box;
    width: 40%;
    background-color: rgba(6, 30, 93, 0.7);
    border-radius: 3px;

    .footer-title {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .footer-detail {
      font-size: 20px;
      color: #1294fb;
      display: flex;
      font-size: 18px;
      align-items: center;

      .dv-digital-flop {
        margin-right: 5px;
      }
    }
  }
}

</style>
